<template >
    <div class="person-box">
        <div class="person-setting">
            个人中心
            <!-- <div class="setting" @click="Setting">
              <span>设置</span>
              <img src="../assets/img/personal-icon-set@2x.png">
            </div> -->
        </div>
        <div class="person-user" v-if="userName">
            <div class="person-user-img">
                <img v-if="avater" :src="avater">         
                <img v-else src="../assets/img/logo.svg">        
            </div>
            <div class="setImgCls">
                <van-uploader
                :max-size="2 * 1024 * 1024"
                :after-read="onOversize"
                >
                <button style="width:100%;height: 58px;display:inline-block;color:rgba(0,0,0,0);background-color: rgba(0,0,0,0);border:none;">上传文件</button>
                </van-uploader>
            </div>
            <div class="person-user-right">
                <div class="person-username">
                    <p >{{userName}}</p>
                    <div class="user-grade" @click="grade()">{{vipName}}</div>
                    <div v-if="integralAgent == 1" @click="agentgrade()" class="user-grade">代理</div>
                    <div v-if="integralAgent == 2" @click="agentgrade()" class="user-grade">高级代理</div>
                    <div v-if="integralAgent == 3" @click="agentgrade()" class="user-grade">城市合伙人</div>
                </div>
                <p class="person-user-reject"  @click="copy"  :data-clipboard-text="inviteCode"><span >邀请码:&nbsp{{inviteCode}}</span> <img src="../assets/img/common-icon-copy@2x.png"></p>
            </div>
            <i @click="Setting" class="icc iconfont icon-iconfontyoujiantou"></i>
        </div>

       <div class="person-user" @click="jumpLogin" v-else>
           <div class="person-user-img"><img src="../assets/img/personal-img-head@2x.png"></div>
           <div  class="person-user-right">
               <div class="person-username">
                   <p style="margin-top: 12px;font-weight:bold;color:rgba(51,51,51,1);font-size:16px;">登录</p>
               </div>
           </div>
           <i class="icc iconfont icon-iconfontyoujiantou"></i>
       </div>
        <div class="person-detailed">
              <div class="person-detailed-left">
                    <div class="person-detailed-text">SQT</div>
                     <div class="person-detailed-left-detail" @click="querydetail()">
                         <span>查看明细</span>
                     </div>
                  <p v-if="tbUserSqt_balance">{{tbUserSqt_balance.toFixed(4)}} <span class="person-detailedp-text">个</span></p>
                  <p v-else> 0 <span class="person-detailedp-text">个</span></p>
              </div>
            <div class="person-detailed-right">
                    <div class="person-detailed-text">钱包</div>
                    <div class="person-detailed-left-detail" @click="querywallet()">
                        <span>查看</span>
                    </div>
                    <p v-if="userName">{{tbUserWallet_balance.toFixed(2)}} <span class="person-detailedp-text">元</span></p>
                    <p v-else> 0 <span class="person-detailedp-text">元</span></p>
            </div>
        </div>
        <div class="person-detailed-bottom" v-if="userName">
            <div class="person-detailed-bottom-left">
                <img src="../assets/img/personal-icon-gold@2x.png">
                <span>&nbsp最近一笔收益:&nbsp&nbsp{{lately_transact_balance?lately_transact_balance:0}} 元</span>
            </div>
            <div class="person-detailed-bottom-right">
                <img src="../assets/img/personal-icon-time@2x.png">
                <span>&nbsp{{createTime}}</span>
            </div>
        </div>
        <div style="width: 100%; height:8px;background:rgba(237,237,237,1);"></div>
        <div class="person-list">
             <div class="person-list-content" @click="myinvitation()">
                   <img src="../assets/img/personal-icon-invite@2x.png">
                   <span>&nbsp我的邀请</span>
                    <div class="person-list-content-right" >
                        <!-- 获得挖矿收益加成：20%  -->
                        <i class="iccc iconfont icon-iconfontyoujiantou"></i>
                    </div>
             </div>
            <div class="person-list-content" @click="myorder()">
                <img src="../assets/img/personal-icon-order@2x.png">
                <span>&nbsp我的订单</span>
                <div class="person-list-content-right" > <i class="iccc iconfont icon-iconfontyoujiantou"></i></div>
            </div>
            <div class="person-list-content" @click="myfavorite()">
                <img style="width: 20px;margin-left: 4px;margin-right: 4px;" src="../assets/img/product-icon-collect-w.svg">
                <span>&nbsp我的收藏</span>
                <div class="person-list-content-right" > <i class="iccc iconfont icon-iconfontyoujiantou"></i></div>
            </div>
        </div>
        <home-index></home-index>
    </div>
</template>
<script>
    import Clipboard from 'clipboard';
    import { Uploader,Toast } from 'vant'
    import homeIndex from "../components/homeIndex"
    export default {
        name:"personalCenter",
        components:{
            homeIndex,
            [Uploader.name]:Uploader
        },
        data(){
            return{
              userId:"",
              userName:'',
              vipName:'',
              inviteCode:'',
              tbUserSqt_balance:'',
              tbUserWallet_balance:0,
              lately_transact_balance:'',
              createTime:'',
              avater:'',
              integralAgent:0
            }
        },
        mounted() {
            this.$store.dispatch('updataActive',4);
            if(localStorage.getItem('user_id')){
                this.userId = localStorage.getItem('user_id');
                this.initData();
            }
        },
        methods:{
            jumpLogin(){
                this.$router.push("/login");
            },
            initData(){
                this.$http.post(this.utils.config+"/netmall/app/person/api/getPersonCenterData?user_id="+this.userId,{user_id:this.userId}).then((data) => {
                    this.userName = data.data.result.tbMnUser.userName;
                    this.avater = data.data.result.tbMnUser.avater;                    
                    this.vipName = data.data.result.tbMnUser.vipName;
                    this.integralAgent = data.data.result.tbMnUser.integralAgent;
                    this.inviteCode = data.data.result.tbMnUser.inviteCode;
                    this.tbUserSqt_balance = data.data.result.tbUserSqt.balance;
                    this.tbUserWallet_balance = data.data.result.tbUserWallet.balance;
                    this.lately_transact_balance = data.data.result.lately_transact.balance;
                    this.createTime = data.data.result.lately_transact.createTime;
                })
            },
            onOversize(file) {
                let params = new FormData();
                params.append('file',file.file);
                let config = { headers: { //添加请求头
                     'Content-Type': 'multipart/form-data' } }
                this.$http.post(this.utils.config+"/netmall/app/person/api/upload",params,config).then((data) => {
                    if(data.data.success){
                        var imgUrl = data.data.message;                        
                        this.$http.post(this.utils.config+"/netmall/app/person/api/updateUserAvater?id="+this.userId+"&avater="+imgUrl).then((data) => {
                            Toast(data.data.message)
                            this.initData();
                        })
                    }
                })
            },
            querydetail(){
                if(this.userId){
                    this.$router.push("/wztdetail");
                }else{
                    this.$router.push("/login");
                }
              },
            querywallet(){
                if(this.userId){
                    this.$router.push("/cashwallet");
                }else{
                    this.$router.push("/login");
                }
            },
            myinvitation(){
                if(this.userId){
                    this.$router.push("/invitation");
                }else{
                    this.$router.push("/login");
                }
            }
            ,myorder(){
                if(this.userId){
                    this.$router.push("/myorder");
                }else{
                    this.$router.push("/login");
                }
            },
            myfavorite(){
                if(this.userId){
                    this.$router.push("/sharePage");
                }else{
                    this.$router.push("/login");
                }
            },
            Setting(){
                if(this.userId){
                    this.$router.push("/Setting");
                }else{
                    this.$router.push("/login");
                }
            },
            grade(){
                this.$router.push("/usergrade");
            },
            agentgrade(){
                this.$router.push("/agentgrade");
            },
            copy() {
                var clipboard = new Clipboard('.person-user-reject')
                clipboard.on('success', e => {
                    this.$toast("复制成功");
                    // 释放内存
                    clipboard.destroy();
                })
                clipboard.on('error', e => {
                    // 不支持复制
                    console.log('该浏览器不支持自动复制')
                    // 释放内存
                    clipboard.destroy();
                })
            }
        }
    }
</script>
<style>
    @import url("../assets/font/iconfont.css");
    .setImgCls{
        position: absolute;
        top:0;
        width:58px;
        height: 58px;
    }
    .person-box{
        background:rgba(255,255,255,1);
        min-height: 100%;
    }
    .person-setting{
        width: 100%;
        height: 53px;
        padding: 0 14px;
        line-height:45px;
        overflow: hidden;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
    }
    .setting{
        margin-top: 9px;
        width: 55px;
        float: right;
    }
    .person-setting img{
        width: 26px;
        height: 26px;
        background-position: center;

    }
    .person-setting span{
        width:26px;
        font-size:13px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:19px;
        float: right;
        display: inline-block;
        margin-top: 3px;
    }
    .person-user{
        width: 100%;
        height: 58px;
        padding: 0 14px;
        position: relative;
    }
    .person-user-img{
        width: 58px;
        height: 58px;
        display: inline-block;
        float: left;
        border: none;
    }
    .person-user-img img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
    }
    .person-user-right{
        float: left;
        margin-left: 14px;
        height: 100%;
    }
    .person-username{
        margin-top: 6px;
        height:24px;
        font-size:16px;
        font-family:SourceHanSansSC-Medium,SourceHanSansSC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:24px;
    }
    .person-username p{
        float: left;
    }
    .user-grade{
        margin-top: 2px;
        float: left;
        margin-left: 8px;
        font-size: 12px;
        color: #fff;
        padding:0px 10px;
        background:linear-gradient(92deg,rgba(255,203,171,1) 0%,rgba(223,151,128,1) 100%);
        border-radius:10px;
        text-align: center;
        position: relative;
    }
    .user-grade span{
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:18px;
        position: absolute;
        top: -0.5px;
        right: 0;
        left: 0;
    }
    .person-user-reject{
        margin-top: 2px;
        height:19px;
        font-size:13px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:19px;
    }
    .person-user-reject img{
        display: inline-block;
        border-radius:50%;
        width: 15px;
        height: 15px;
        margin-top: 2px;
    }
   .icc{
       font-size: 14px;
       position: absolute;
       right: 14px;
       top: 18px;
       color: #cccccc;
   }
    .person-detailed{
        margin-top: 21px;
        width: 100%;
        height: 86px;
        padding: 0 14px;
    }
    .person-detailed-left{
          float: left;
          width:48%;
          height:86px;
          background:linear-gradient(180deg,rgba(255,90,160,1) 0%,rgba(255,46,103,1) 100%);
          border-radius:6px;
         position: relative;
        text-align: center;

      }
    .person-detailed-text{
        position: absolute;
        top: 13px;
        left: 16px;
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:18px;
    }
    .person-detailed-left-detail{
        position:absolute ;
        right: 0;
        margin-top: 15px;
        width:71px;
        height:23px;
        background:rgba(255,255,255,1);
        border-radius:100px 0px 0px 100px;
        opacity:0.69;
        text-align: center;
    }
    .person-detailed-left-detail span{
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(255,46,103,1);
        line-height:23px;
    }
    .person-detailed-left p{
        position: absolute;
        top: 44px;
        left: 15px;
        font-size:24px;
        font-family:DIN-Medium,DIN;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:29px;
    }
    .person-detailedp-text{
        font-size:10px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:35px;
    }

    .person-detailed-right{
        float: left;
        margin-left: 4%;
        width:48%;
        height:86px;
        background:linear-gradient(180deg,rgba(255,203,177,1) 0%,rgba(233,167,141,1) 100%);
        border-radius:6px;
        position: relative;
    }
    .person-detailed-right p{
        position: absolute;
        top: 44px;
        left: 15px;
        font-size:24px;
        font-family:DIN-Medium,DIN;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:29px;
    }
.person-detailed-bottom{
    width: 100%;
    height: 56px;
    padding: 0 14px;
}
    .person-detailed-bottom-left{
        float: left;
    }
    .person-detailed-bottom-left img{
        display: inline-block;
        margin-top: 20px;
        width: 16px;
        height: 16px;
        background-position: center;;
    }
    .person-detailed-bottom-left span{
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(214,143,115,1);
        line-height:56px;
    }
    .person-detailed-bottom-right{
        float: right;
    }
    .person-detailed-bottom-right img{
        display: inline-block;
        margin-top: 20px;
        width: 18px;
        height: 18px;
        background-position:center ;
    }
   .person-detailed-bottom-right span{
       width:36px;
       height:18px;
       font-size:12px;
       font-family:SourceHanSansSC-Regular,SourceHanSansSC;
       font-weight:400;
       color:rgba(136,136,136,1);
       line-height:56px;
   }
    .person-list{
        padding: 0 14px;
    }
  .person-list-content{
      margin-top: 10px;
      height: 50px;
      width: 100%;
      border-bottom: 1px solid rgba(0,0,0,0.1);
  }
    .person-list-content img{
        width: 28px;
        height: 28px;
        float: left;
        margin-top: 10px;
    }
    .person-list-content span{
        font-size:14px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:50px;
        letter-spacing:1px
    }
    .person-list-content-right{
        float: right;
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(233,167,141,1);
        line-height:50px;
    }
    .iccc{
        font-size: 12px;
        color: #cccccc;
    }

</style>
